<template>
  <div style="position: relative;">
    <el-row>
      <el-col span="3" :offset="3" id="str" >
        旧用户名：
      </el-col>
      <el-col span="12">
        <el-input v-model="oldName" placeholder="请输入内容" :disabled="true"></el-input>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col span="3" :offset="3" id="str">
        新用户名：
      </el-col>
      <el-col span="12">
        <el-input v-model="newName" placeholder="请输入内容" ></el-input>
      </el-col>
    </el-row>
    <br />
    <el-button type="primary" @click="setPwd()" style="margin-top: 80px;margin-left: 650px;">修改</el-button>
    <div style="margin-left: 650px; margin-top: 140px;">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>是否确认修改</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="setPassword()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
 export default{
   name:"SetAccountName",
   data(){
   	return{
      oldName:JSON.parse(localStorage.getItem("user")).data.accountName,
      newName:"",
      dialogVisible:false,
   	}
   },
   methods:{
      setPwd(){
        this.dialogVisible=true;
      },
      setPassword(){
        if(this.newName==null || this.newName == ""){
          alert("新用户名不能空")
          this.dialogVisible=false;
        }else{
        this.$http.get("/account/setAccountName",{
          	params:{
          		accountName:this.newName
          	}
          }).then(resp=>{
            console.log(resp)
          	if(resp.data.code == 200){
              this.dialogVisible=false;
              localStorage.setItem("user",JSON.stringify(resp.data))
              alert("修改成功")
              this.$router.push("/PersonalCenter")
            }else{
              alert(resp.data.message)
            }
          })
        }
      }
   }
 }
</script>

<style>

</style>
